<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客管理</title>
    <!-- Semantic UI 框架 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <!-- 自己编写的 CSS -->
    <link rel="stylesheet" href="../../static/css/me.css">
</head>

<body>
    <!-- 导航 -->
    <nav class="ui inverted attached segment me-padded-tb-mini me-shadow">
        <div class="ui container">
            <div class="ui inverted secondary stackable menu">
                <h1 class="ui item header teal">博客管理</h1>
                <a href="#" class="ui item active me-mobile-hide me-item">
                    <i class="home icon"></i>博客
                </a>
                <a href="#" class="ui item me-mobile-hide me-item">
                    <i class="idea icon"></i>分类
                </a>
                <a href="#" class="ui item me-mobile-hide me-item">
                    <i class="tags icon"></i>标签
                </a>
                <div class="right menu me-mobile-hide me-item">
                    <div class="ui dropdown item">
                        <div class="text">
                            <img src="../../static/img/avatar.png" alt="" class="ui avatar image">
                            江南笑书生
                        </div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <a href="#" class="item">注销</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 移动端控制菜单隐藏与显示 -->
        <!-- <a href="#" class="ui menu toggle black icon button me-right-top me-mobile-show">
            <i class="sidebar icon"></i>
        </a> -->
        <button class="ui secondary icon button menu toggle me-right-top me-mobile-show">
            <i class="sidebar icon"></i>
        </button>
    </nav>
    <div class="ui pointing menu attached">
        <div class="ui container">
            <div class="right menu">
                <a href="#" class="item teal active"><i class="list icon"></i>博客列表</a>
                <a href="publish.html" class="item"><i class="pencil icon"></i>发布博客</a>
            </div>
        </div>
    </div>
    <!-- <div class="ui container bottom attached">
        <div class="ui pointing menu right floated">
            <a href="#" class="item active">列表</a>
            <a href="#" class="item">发布</a>
        </div>
    </div> -->

    <!-- 中间内容 -->
    <div class="ui me-padded-tb-large me-container-small">
        <div class="ui container">
            <!-- 搜索表单 -->
            <div class="ui segment">
                <form action="" method="post" class="ui form">
                    <div class="inline fields">
                        <div class="field">
                            <input type="text" name="title" id="title" placeholder="博客标题">
                        </div>
                        <div class="field">
                            <select class="ui compact dropdown" name="category">
                                <option value="">分类</option>
                                <option value="0">原创</option>
                                <option value="1">转载</option>
                                <option value="2">翻译</option>
                                <option value="3">日志</option>
                            </select>
                        </div>
                        <div class="field">
                            <div class="ui  checkbox">
                                <input type="checkbox" id="recommend" name="recommend" class="hidden">
                                <label for="recommend">推荐</label>
                            </div>
                        </div>
                        <div class="field">
                            <input type="submit" value="搜索" class="ui teal mini button">
                        </div>
                        <a href="#" class="ui teal button right floated">新增</a>
                    </div>
                </form>
            </div>
            <!-- 博客列表 -->
            <table class="ui striped selectable table">
                <thead>
                    <tr class="center aligned">
                        <th>标题</th>
                        <th>分类</th>
                        <th>推荐</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="center aligned">
                        <td>关于刻意练习的清单</td>
                        <td>转载</td>
                        <td>是</td>
                        <td>2021-03-01&nbsp;&nbsp;09:30:02</td>
                        <td>
                            <a href="#" class="ui mini teal basic button">
                                修改
                            </a>
                            <a href="#" class="ui mini negative basic button">
                                删除
                            </a>
                        </td>
                    </tr>
                    <tr class="center aligned">
                        <td>关于刻意练习的清单</td>
                        <td>转载</td>
                        <td></td>
                        <td>2021-03-01&nbsp;&nbsp;09:30:02</td>
                        <td>
                            <a href="#" class="ui mini teal basic button">修改</a>
                            <a href="#" class="ui mini negative basic button">删除</a>
                        </td>
                    </tr>
                    <tr class="center aligned">
                        <td>关于刻意练习的清单</td>
                        <td>转载</td>
                        <td></td>
                        <td>2021-03-01&nbsp;&nbsp;09:30:02</td>
                        <td>
                            <a href="#" class="ui mini teal basic button">修改</a>
                            <a href="#" class="ui mini negative basic button">删除</a>
                        </td>
                    </tr>
                    <tr class="center aligned">
                        <td>关于刻意练习的清单</td>
                        <td>转载</td>
                        <td></td>
                        <td>2021-03-01&nbsp;&nbsp;09:30:02</td>
                        <td>
                            <a href="#" class="ui mini teal basic button">修改</a>
                            <a href="#" class="ui mini negative basic button">删除</a>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="5" class="center aligned">
                            <div class="ui tiny pagination menu">
                                <a class="icon item">
                                    <i class="left chevron icon"></i>
                                </a>
                                <a class="item">1</a>
                                <a class="item">2</a>
                                <a class="item">3</a>
                                <a class="item">4</a>
                                <a class="icon item">
                                    <i class="right chevron icon"></i>
                                </a>
                            </div>
                        </th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>


    <!-- 底部 -->
    <footer class="ui inverted vertical segment me-padded-tb-massive">
        <div class="ui container center aligned">
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <!-- <h4 class="ui inverted header"><i class="wechat icon"></i>与我联系</h4> -->
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="../../static/img/wechat.jpg" alt="wechat" class="ui rounded image"
                                style="width: 8em;">
                        </div>
                    </div>
                </div>
                <div class="four wide column">
                    <h4 class="ui inverted header">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事</a>
                        <a href="#" class="item">用户故事</a>
                        <a href="#" class="item">用户故事</a>
                    </div>
                </div>
                <div class="four wide column">
                    <h4 class="ui inverted header">联系我</h4>
                    <div class="ui inverted link list">
                        <div class="item">
                            <i class="envelope icon"></i> Email : cplasfyin@163.com
                        </div>
                        <div class="item">
                            <i class="qq icon"></i> QQ : 2916393359
                        </div>
                        <div class="item">
                            <i class="wechat icon"></i> 微信 : DX10485
                        </div>
                        <a href="#" class="item">用户故事</a>
                    </div>
                </div>
                <div class="five wide column">
                    <h4 class="ui inverted header">江南笑书生</h4>
                    <p style="opacity: 0.6 !important;">
                        这是我的个人博客，会分享关于编程、写作、思考相关的内容，希望可以给来到这的人有所帮助
                    </p>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p style="opacity: 0.5 !important;">
                Copyright
                <i class="copyright outline icon"></i>
                2020 - 2021 Designed by YGQ
            </p>
        </div>
    </footer>

    <script>
        // 控制移动端导航条显示
        $('.menu.toggle').click(function () {
            $('.me-item').toggleClass('me-mobile-hide');
        });
        // 下拉菜单
        $('.ui.dropdown').dropdown();
    </script>
</body>

</html>